<template>
    <div class="orderDeal">
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
            <el-breadcrumb-item>订单处理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="footer-content">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>
        <div class="info-content">
            <el-tabs class="info-tabs" v-model="activeName" @tab-click="$libs.scrollTop('.el-tabs__content')">
                <template v-for="vm in tapList">
                    <el-tab-pane class="info-temp" :label="vm.name" :name="'tap'+vm.index">
                        <div v-if="vm.temp=='attachment'" :is="vm.temp" :ref="vm.temp" @submit-attachmentHad="attachHave"></div>
                        <div v-else :is="vm.temp" :ref="vm.temp"></div>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
    name: 'orderDeal',
    components: {
        customInfo: require('../../components/order/customInfo'),
        carBuyCommon: require('../../components/order/carBuyCommon'),
        assurePerson: require('../../components/order/assurePerson'),
        carAndCredit: require('../../components/order/carAndCredit'),
        attachment: require('../../components/order/attachment'),
        finance: require('../../components/order/finance'),
        synthesize: require('../../components/order/synthesize'),
        assetProtection: require('../../components/order/assetProtection'),
        checkInfo: require('../../components/order/checkInfo'),
        historyLoan: require('../../components/order/historyLoan'),
    },
    data() {
        return {
            orderNo: this.$route.query.orderNo,
            annexBatchNo: this.$route.query.annexBatchNo,
            customerIdCard: this.$route.query.customerIdCard,
            activeName: 'tap8',
            tapNumEdit: 0,
            tapList: [
                { name: '客户信息', index: 1, temp: 'customInfo', show: true },
                { name: '共同购车人', index: 2, temp: 'carBuyCommon', show: true },
                { name: '担保人', index: 3, temp: 'assurePerson', show: true },
                { name: '车辆及贷款信息', index: 4, temp: 'carAndCredit', show: true },
                { name: '审核信息', index: 10, temp: 'checkInfo', show: true },
                { name: '综合处理', index: 8, temp: 'synthesize', show: true },
                { name: '财务结算', index: 7, temp: 'finance', show: true },
                { name: '附件', index: 5, temp: 'attachment', show: 'none' },
                { name: '历史贷款记录', index: 6, temp: 'historyLoan', show: true },
            ],
            isAttachHaveRun: false,
        }
    },
    watch: {
        tapNumEdit: function(_cur, _old) {
            console.log('tapNumEdit-' + _cur);
            if (_cur == 4) {
                console.log(this);
                for (var i = 0; i < this.tapList.length; i++) {
                    if (this.tapList[i].show == false) {
                        this.tapList.splice(i, 1);
                        i--;
                    }
                }
                this.tapNumEdit = 0;
                this.$nextTick(() => {
                    this.getDataSecond();
                });
            }
        },
        deep: true
    },
    methods: {
        submit() {
            console.log(this.activeName);
            this.$refs.synthesize[0].powerDeal(this.orderNo, -1);
        },
        attachHave() {
            let ishaveAttach = false;
            for (var i = 0; i < this.tapList.length; i++) {
                if (this.tapList[i].index == 5) {
                    ishaveAttach = true;
                    this.tapList[i].show = true;
                }
            }
            if (!ishaveAttach) {
                this.tapList.push({ name: '附件', index: 5, temp: 'attachment', show: true });
            }
            this.isAttachHaveRun = true;
        },
        getDataSecond() {
            for (let i = 0; i < this.tapList.length; i++) {
                let el = this.tapList[i];
                switch (el.index) {
                    case 1:
                        this.$refs[el.temp][0].getUserInfo(this.orderNo);
                        break;
                    case 2:
                        this.$refs[el.temp][0].getInfo(this.orderNo);
                        break;
                    case 3:
                        this.$refs[el.temp][0].getInfo(this.orderNo);
                        break;
                    case 4:
                        this.$refs[el.temp][0].isGps = false;
                        this.$refs[el.temp][0].getCarInfo(this.orderNo);
                        this.$refs[el.temp][0].getLoanInfo(this.orderNo);
                        break;
                    case 5:
                        this.$refs[el.temp][0].postDeal(this.orderNo, this.annexBatchNo);
                        break;
                    case 6:
                        this.$refs[el.temp][0].customerIdCard = this.customerIdCard;
                        this.$refs[el.temp][0].getDate(this.orderNo);
                        break;
                    case 7:
                        this.$refs[el.temp][0].getFinanceData(this.orderNo);
                        break;
                    case 8:
                        this.$refs[el.temp][0].isEdit = true;
                        this.$refs[el.temp][0].getData(this.orderNo);
                        break;
                    case 10:
                        this.$refs[el.temp][0].getInfo(this.orderNo);
                        break;
                    default:
                        break;
                }
            }
        },
    },
    mounted() {
        this.$refs.attachment[0].postDeal(this.orderNo, this.annexBatchNo);
        this.$refs.attachment[0].show = false;
        this.tapNumEdit = 0;
        this.$refs.carBuyCommon[0].getInfo(this.orderNo, () => {
            for (let i = 0; i < this.tapList.length; i++) {
                let val = this.tapList[i];
                if (val.index == 2) {
                    val.show = false;
                    console.log('tapList1');
                    this.tapNumEdit++;
                }
            }
        }, () => {
            console.log('tapList11');
            this.tapNumEdit++;
        });
        this.$refs.assurePerson[0].getInfo(this.orderNo, () => {
            for (let i = 0; i < this.tapList.length; i++) {
                let val = this.tapList[i];
                if (val.index == 3) {
                    val.show = false;
                    console.log('tapList2');
                    this.tapNumEdit++;
                }
            }
        }, () => {
            console.log('tapList21');
            this.tapNumEdit++;
        });
        this.$refs.finance[0].getFinanceData(this.orderNo, () => {
            for (let i = 0; i < this.tapList.length; i++) {
                let val = this.tapList[i];
                if (val.index == 7) {
                    val.show = false;
                    console.log('tapList4');
                    this.tapNumEdit++;
                }
            }
        }, () => {
            console.log('tapList41');
            this.tapNumEdit++;
        });
        this.$refs.historyLoan[0].customerIdCard = this.customerIdCard;
        this.$refs.historyLoan[0].getDate(this.orderNo, () => {
            for (let i = 0; i < this.tapList.length; i++) {
                let val = this.tapList[i];
                if (val.index == 6) {
                    val.show = false;
                    console.log('tapList3');
                    this.tapNumEdit++;
                }
            }
        }, () => {
            console.log('tapList31');
            this.tapNumEdit++;
        });
        this.$refs.attachment[0].postDeal(this.orderNo, this.annexBatchNo);
        if (this.$route.query.orderStatus == 51) {
            this.$refs.finance[0].disabledTwo = true;
        }
    }
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.orderDeal {
    padding: 10px 16px;
    position: relative;
    .info-content {
        background: #fff;
        padding: 20px;
        position: absolute;
        top: 50px;
        left: 16px;
        right: 16px;
        bottom: 0;
        .info-temp {
            background: #fff;
            padding: 0px 20px 40px 20px;
            .credit,
            .customInfo,
            .carBuyCommon,
            .assurePerson,
            .carAndCredit,
            .creditEnter,
            .attachment,
            .assetProtection,
            .checkInfo,
            .checkModify {
                padding-right: 200px;
            }
            .synthesize {
                padding-right: 0px;
            }
            .finance {
                padding-right: 100px;
            }
        }
    }
    .footer-content {
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 200px;
        right: 0px;
        height: 36px;
        padding: 12px 100px 12px 50px;
        border-top: 1px solid #e0e6ed;
        z-index: 1;
    }
    .dialogContent {
        padding: 0px 30px 10px 30px;
    }
}

</style>
